{% load static %}
<!DOCTYPE html>
<html lang="en">
<style>
    *{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    display: flex;
    justify-content: center; /*在容器中央对齐弹性项目*/
    align-items: center;
    width: 100%;
    min-height: 100vh;
    background-color: #2d2d2d;
    background-image:url({% static 'img/cat.jpg' %});
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    overflow: hidden;
}
.login-box{
    display: flex;
    justify-content: center;  /*居中排列*/
    align-content:space-around;
    flex-wrap: wrap;  /*项目排在一条线上，换行，第一行在上方*/
    width: 600px;
    height: 400px;
    background-color: rgba(0, 0, 0,.4);
    border: 10px;
    padding: 20px 50px;
    border-radius: 20px;
}
.login-box .input-box{
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    transform: translateY(-35px);
}
.login-box  .input-box  .input-text{
    width: 100%;
    display: flex;
    justify-content: center;
}
.login-box  .input-box  .input-text span{
    color: aliceblue;
    font-size: 18px;
    margin-top: 20px;

}
.login-box  .input-box  .input-text input{
    border: 0;
    padding: 6px;
    border-bottom: 1px solid white;
    background-color: #ffffff00;
    color: #fff;
    margin-top: 20px;
}
.login-box  .input-box  .button{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 25px;
    width: 145px;
    height: 25px;
    color: #fff;
    background: linear-gradient(120deg,#a6c0fe 0%, #2E8B57 100%);
    border-radius: 25px;
    cursor: pointer;
}
.login-box  .input-box  .signup{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 40px;
    color: #fff;
    font-size: 15px;

}
.login-box  .input-box  .signup a{
    color: #a6c0fe;
    text-decoration: none;
}
</style>
<head>
    <meta charset="UTF-8">
      <title>login</title>
{#    <link rel="stylesheet" href="{% static 'css/login.css'%}">#}
</head>
<body>
    <div class="login-box">
{#        <h4>login</h4>#}
        <div class="input-box">
            <form action="/user/login/" method="post">
                {% csrf_token %}
                <div class="input-text">
                    <span class="login-login"><img src="{% static 'img/账户.png'%}"style="width: 25px;height: 25px;"></span>
                    <input type="text" placeholder="用户名" name="userid">
                </div>
                <div class="input-text">
                    <span class="login-passwd"><img src="{% static 'img/密码.png'%}" style="width: 25px;height: 25px;"></span>
                    <input type="password" placeholder="密码" name="password">

                </div>
                <input type="submit" value="登录">
                <br>
                {{ error }}
                <div class="signup">
                    还没有账户？<a href="../register">注册</a>
                </div>
            </form>
        </div>
    </div>
</body>
</html>